<template>
    <div class="box">
        <!-- 头部banner -->
        <div class="top">
            <van-row gutter="32">
                <!-- <router-link to="/caifu">
                    <van-col span="8"><van-icon name="arrow-left" /></van-col>
                </router-link> -->
                <van-col span="8" @click="$router.go(-1)"><van-icon name="arrow-left" /></van-col>
                <van-col span="8" class="text">风险能力测评</van-col>
                <van-col span="8"><van-icon name="ellipsis" /></van-col>
            </van-row>
        </div>
        <!-- 风险图片 -->
        <div class="risk-i">
            <img src="./assets/监测平台图片-image.png" alt="请找lzb调试">
            <div class="risk-p">
                <img src="./assets/文字1.svg" alt="请找lzb调试">
            </div>
            <router-link to="/Risktest">
                <div class="risk-bt">
                    <img src="./assets/开始测评按钮.svg" alt="请找lzb调试">
                </div>
            </router-link>
        </div>
        <!-- 文字图 -->
        <div class="risk-text">
            <img src="./assets/文字2.svg" alt="请找lzb调试">
        </div>
    </div>
</template>

<script setup>
import router from '../../router';


</script>

<style scoped>
.box {
    height: 100%;
    background-image: url('./assets/背景图.svg');
}

/* 头部banner */
.top {
    height: 30px;
    position: relative;
    border: 1px solid rgb(220, 208, 255);
}

.top .van-icon-arrow-left {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(-50%, -50%);

}

.top .van-icon-ellipsis {
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translate(-50%, -50%);

}

.top .text {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 风险图片 */
.risk-i {
    width: 100%;
    /* 确保容器有足够的宽度 */
    margin-top: 20px;
}

.risk-i img {
    width: 50%;
    height: auto;
}

.risk-p {
    margin-top: 20px;
}

.risk-p img {
    width: 70%;
    height: auto;
}

.risk-bt {
    margin-top: 10px;
}

.risk-bt img {
    width: 60%;
    height: auto;
}

/* 文字图 */
.risk-text {
    width: 96%;
    margin-top: 20px;
    margin-left: 1.5%;
    margin-bottom: 30px;

}

.risk-text img {
    width: 95%;
    height: auto;
}
</style>